import { ChangeDetectionStrategy, Component, OnInit, ViewChild } from '@angular/core';
import { lvFlattenTreeData, TransferComponent, TreeComponent, TreeNode } from '@iux/live';

@Component({
  selector: 'app-tree-transfer',
  templateUrl: './tree-transfer.component.html',
  styles: [
    `
      .ui-customer-transfer {
        width: 752px;
        height: 400px;
      }
      .ui-customer-transfer-search {
        width: 100%;
      }
      .ui-customer-transfer-source-render {
        padding: 3px 8px;
      }
      .ui-transfer-target-item {
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 56px;
        padding: 0 8px;
        border-bottom: 1px solid #f2f2f2;
      }
      .ui-transfer-target-item-info {
        width: 100%;
        font-size: 14px;
        line-height: 22px;
        overflow: hidden;
      }
      .ui-transfer-target-item-label {
        color: #1a1a1a;
      }
      .ui-transfer-target-item-auxiliary {
        color: #808080;
      }
      .ui-transfer-target-item-remove {
        flex-shrink: 0;
        margin-left: 8px;
        cursor: pointer;
      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TreeTransferComponent implements OnInit {
  source: { data: TreeNode[]; selection: any[] } = {
    data: [],
    selection: [],
  };

  data: TreeNode[] = [
    {
      label: 'root node 1',
      expanded: true,
      children: [
        {
          label: 'child node 1-1 long long long long long long long long long long long long name.doc',
          expanded: true,
          children: [
            { label: 'left node 1-1-1', isLeaf: true },
            { label: 'left node 1-1-2', isLeaf: true },
          ],
        },
        {
          label: 'child node 1-2',
          children: [
            { label: 'left node 1-2-1', isLeaf: true },
            { label: 'left node 1-2-2', isLeaf: true },
          ],
        },
      ],
    },
    {
      label: 'root node 2',
      expanded: true,
      children: [
        {
          label: 'left node 2-1',
          isLeaf: true,
        },
        {
          label: 'child node 2-2',
          children: [
            { label: 'left node 2-2-1', isLeaf: true },
            { label: 'left node 2-2-2', isLeaf: true },
          ],
        },
      ],
    },
    {
      label: 'root node 3',
      children: [
        {
          label: 'left node 3-1',
          isLeaf: true,
        },
        {
          label: 'left node 3-2',
          isLeaf: true,
        },
      ],
    },
  ];
  selection: TreeNode[] = [];

  @ViewChild('tree', { static: false }) tree: TreeComponent;
  @ViewChild('transfer', { static: false }) transfer: TransferComponent;

  constructor() {}

  ngOnInit() {
    this.initData();
  }

  initData() {
    this.source.data = lvFlattenTreeData(this.data, true).map(item => item.data);
  }

  change(selection) {
    this.source.selection = [...selection];
  }

  selectionChange(event) {
    const { selection } = event;

    this.selection.length = 0;
    this.source.selection.length = 0;

    this.selection = [...selection];
    this.source.selection = [...selection];
  }

  remove(item) {
    this.tree.toggleSelection(item);

    this.source.selection = [...this.selection];
  }

  getParent(data) {
    const parents = [];
    const dig = item => {
      if (item.parent) {
        parents.unshift(item.parent);
        dig(item.parent);
      }
    };

    dig(data);

    return parents;
  }

  selectAll(): void {
    this.transfer.selectionChange(
      this.source.data.filter(item => !item.hidden),
      'source'
    );
  }
}
